<template>
	<z-paging-swiper ref="paging" class="z-paging" :swiper-style="{ top: '0px' }">
		<template v-slot:top>
			<z-tabs ref="tabs" :current="current" :list="tabList" @change="tabsChange"></z-tabs>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<noItemVue :item="item" :swiperCurrent="index" :current="current" :readId="readId" />
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
import http from '@/common/request.js';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import noItemVue from './noItem.vue';
import { ref, reactive } from 'vue';
import { getImgSrc, navTo } from '@/common/utils';

const tabList = ref([
	{
		name: '经营报告',
		value: 1
	},
	{
		name: '购销预警',
		value: 2
	},
	{
		name: '收款通知',
		value: 3
	},
	{
		name: '审核通知',
		value: 4
	}
]);

const current = ref(0);

const animationfinish = (d) => {
	current.value = d.detail.current;
};

const tabsChange = (index) => {
	current.value = index;
};

// 已读的id
const readId = ref('');
const readOk = (id) => {
	readId.value = id;
};

onLoad(() => {
	uni.$on('read', readOk);
});

onUnload(() => {
	uni.$off('read', readOk);
});
</script>

<style lang="scss" scoped>
.swiper {
	height: 100%;
}
</style>
